<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>FlashMsg for jQuery</title>
	<meta name="description" content="Displays a non-modal message for a certain ammount of time in the center of the page.">
	<meta name="author" content="Julio César Carrascal Urquijo &lt;jcarrascal@gmail.com&gt;">
	<link rel=stylesheet href="styles.css">
	<link rel=stylesheet href="jquery-flashmsg.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="jquery-flashmsg.js"></script>
	<style>
		#demoMsg {
			border: 0;
			font: inherit;
		}
		label {
			display: inline-block;
			width: 170px;
		}
	</style>
</head>
<body>
	<h1>FlashMsg for jQuery</h1>
	<p class=summary>Displays a non-modal message for a certain ammount of time in the center of the page.</p>
	<h2>Usage:</h2>
	<p>In your page you need to include jQuery, the FlashMsg JavaScript file and the FlashMsg CSS file. In the following sample you can see how it looks:</p>
	<pre>
&lt;link rel="stylesheet" href="jquery-flashmsg.css"&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery-flashmsg.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function() {

	// Display a message on load.
	$.flashMsg('<input id=demoMsg type=text value="Hello, world!">');

});
&lt;/script&gt;
</pre>
	<p>
		<label for=demoDisplayTime>Display time:</label>
		<select id=demoDisplayTime>
			<option value=2000>2000 ms</option>
			<option selected value=5000>5000 ms</option>
			<option value=10000>10000 ms</option>
		</select><br>
		<label for=demoHideByUser>Hide by user activity:</label><input checked id=demoHideByUser type=checkbox><br>
		<button id=demoExecute type=button>Execute</button>
	</p>
	<h2>Methods</h2>
	<dl>
		<dt>jQuery.flashMsg(msg)</dt>
		<dd>
			<p>Displays the specified message. It's equivalent to calling <code>jQuery.flashMsg('show', msg)</code>.</p>
		</dd>

		<dt>jQuery.flashMsg('setup', options)</dt>
		<dd>
			<p>Initializes the message display. If you don't call it, it will be initialized using the default settings. You can specify any of the following options:</p>
			<table class=options>
				<thead>
					<tr>
						<th>Parameter</th>
						<th>Type</th>
						<th>Default</th>
						<th>Description</th>
					</tr>
				</thead>
				<tr>
					<td>id</td>
					<td>string</td>
					<td>"flashMsg"</td>
					<td>Id of the message display.</td>
				</tr>
				<tr>
					<td>displayTime</td>
					<td>int</td>
					<td>5000</td>
					<td>Time to display the message in milliseconds. By default it's 5 seconds.</td>
				</tr>
				<tr>
					<td>hideByUser</td>
					<td>bool</td>
					<td>true</td>
					<td>
						Hides the message before displayTime has elapsed if it detects user activity (mouse movement or
						a keypress).
					</td>
				</tr>
				<tr>
					<td>opacity</td>
					<td>double</td>
					<td>0.8</td>
					<td>Opacity of the message display. 0-1</td>
				</tr>
			</table>
		</dd>

		<dt>jQuery.flashMsg('show', msg)</dt>
		<dd>
			<p>Displays the specified message.</p>
		</dd>

		<dt>jQuery.flashMsg('hide')</dt>
		<dd>
			<p>Hides the message display.</p>
		</dd>
	</dl>	
	<h3>License</h3>
	<p>You may use any FlashMsg under the terms of either the MIT License or the GNU General Public License (GPL) Version 2.</p>
	<p><a href="https://petprojects.googlecode.com/svn/trunk/MIT-LICENSE.txt">MIT-LICENSE.txt</a><br/>
	<a href="https://petprojects.googlecode.com/svn/trunk/GPL-LICENSE.txt">GPL-LICENSE.txt</a></p>
	<script>
		$('#demoExecute')
			.click(function(e) {
				e.stopPropagation();
				$.flashMsg($('#demoMsg').val());
			});
		$('#demoHideByUser')
			.change(function() {
				$.flashMsg('setup', { hideByUser: $(this).is(':checked') });
			})
			.change();
		$('#demoDisplayTime')
			.change(function() {
				$.flashMsg('setup', { displayTime: $(this).val() });
			})
			.change();
		$.flashMsg('show', 'Don\'t forget to click the Execute button.');
	</script>
</body>
</html>
